import { useState, useEffect } from 'react'
import List from './List'
import axios from 'axios'
import WeUI from 'react-weui'

const {
  Panel,
  PanelHeader,
  PanelBody,
  Toast
} = WeUI

const Loading = () => {
  return (
    <>
      加载中。。。
    </>
  )
}

function App() {
  const [loading, setLoading] = useState(true)
  const [list, setList] = useState([])
  // 数据请求 放 父组件里 做 自有状态
  useEffect(() => {
    axios
      .get('https://www.fastmock.site/mock/a5c60caa5aed2dfc5b66268f50db9034/booklist/booklist')
      .then(res => {
        if (res.data) {
          // console.log(res.data)
          setList(res.data)
          setLoading(false)
        } else {
          console.log('出问题了')
        }
      })
  }, [])

  return (
    <Panel>
      <PanelHeader>图书列表</PanelHeader>
      <PanelBody>
        {/* <button className='weui-btn weui-btn_primary' /> */}
        {/* {loading ? <Loading /> : <List data={list} />} */}
        <Toast show={loading} icon="loading">加载中...</Toast>
        {list.length > 0 && <List data={list} />}
      </PanelBody>
    </Panel>
  )
}

export default App
